<template>
  <div>
    <div style="display: flex">
      <a-button size="large" class="editable-add-btn" @click="startSubmit">
        <a-icon type="plus"/>
        新增商品
      </a-button>
      <a-input-search
          placeholder="请输入商品名"
          enter-button="搜索商品"
          style="width: 400px;margin-left: 20px"
          size="large"
          @search="onSearch"
      />
      <a-button style="margin-left: 10px" size="large" type="danger" @click="loadTableData">
        重置
      </a-button>

    </div>
    <a-table :loading="loading" :columns="columns" :data-source="data" :sortDirections="['ascend', 'descend']" rowKey="id">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o"/> 商品名称</span>
      <span slot="action" slot-scope="text, record, index">
        <a-button @click="handleUpdate(record)" type="link"><a-icon type="edit"/> Update</a-button>
      <a-divider type="vertical"/>
         <a-button @click="handleDelete(record,index)" type="link"><a-icon type="delete"/> Delete</a-button>
      </span>
    </a-table>

    <a-modal
        title="商品信息"
        :closable="false"
        :visible="commodityVisible"
    >
      <a-form-model ref="ruleForm" :model="commodity">
        <a-form-model-item ref="name" label="商品名称" prop="name">
          <a-input v-model="commodity.name"/>
        </a-form-model-item>
        <a-form-model-item label="商品单价" prop="price">
          <a-input-number id="input" v-model="commodity.price" :min="1"/>
        </a-form-model-item>
        <a-form-model-item label="描述信息" prop="description">
          <a-input v-model="commodity.description" type="textarea"/>
        </a-form-model-item>
        <a-form-model-item >
          <video ref="videoElement" autoplay style="display:none;width: 100%;"></video>
        </a-form-model-item>
      </a-form-model>

      <template slot="footer">
        <a-button key="back" @click="commodityVisible = false">
          Return
        </a-button>
        <a-button key="submit" type="primary" :loading="modalLoading" @click="submitCommodity">
          Submit
        </a-button>
        <a-button key="submit2" type="primary" @click="submitCommodity2">
          识图
        </a-button>


      </template>
    </a-modal>

  </div>
</template>

<script>
import {DeleteCommodityById, FindAllCommodity, SaveCommodity} from "@/api/commodity";
import {SearchCommodity} from "../../api/commodity";
import axios from "axios";

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '库存数量',
    dataIndex: 'count',
    key: 'age'
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    // sorter: (a, b) => { return a.count> b.count? 1 : -1 },
    // sortField: 'count'
  },
  {
    title: '描述信息',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: '入库时间',
    dataIndex: 'createAt',
    key: 'createAt',
    defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => { return a.createAt> b.createAt? 1 : -1 },
    sortField: 'createAt'
  },
  {
    title: '商品单价',
    key: 'price',
    dataIndex: 'price',
    scopedSlots: {customRender: 'tags'},
  },
  {
    title: '更多操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  }
];

const data = [];

export default {
  data() {
    return {
      commodity: {
        name: '',
        description: '商品简介',
        count: 0,
        price: 9.99,
      },
      loading: false,
      modalLoading: false,
      commodityVisible: false,
      commodityLoading: false,
      data: [],
      columns,

      cameraActive: false,
      cameraButtonText: '打开摄像头'
    }},

  mounted() {
    this.loadTableData()
  },

  methods: {
    startSubmit(){
      this.commodityVisible = true
      this.commodity={
        name: '',
        description: '商品简介',
        count: 0,
        price: 9.99,
      }
    },
    onSearch(value) {
      if (value){
        this.loading = true
        SearchCommodity(value).then((res) => {
          console.log(res)
          if (res.data.length === 0) {
            this.$message.warn("未搜索到任何数据")
            setTimeout(() => {
              this.loading = false
              this.data = res.data
            }, 600)
          } else {
            setTimeout(() => {
              this.$message.success("搜索到" + res.data.length + "个商品")
              this.loading = false
              this.data = res.data
            }, 600)
          }
        })
      }else {
        this.$message.warn("请输入搜索内容")
      }
    },

    loadTableData() {
      this.loading = true
      FindAllCommodity().then((res) => {
        setTimeout(() => {
          this.loading = false
          this.data = res.data
          console.log(this.data)

        }, 600)
      })
    },
    submitCommodity() {
      this.modalLoading = true
      SaveCommodity(this.commodity).then((res) => {
        if (res.status) {
          setTimeout(() => {
            this.modalLoading = false
            this.commodityVisible = false
            this.$message.success('商品信息提交成功');
            this.loadTableData()

          }, 600)
        } else {
          setTimeout(() => {
            this.modalLoading = false
          }, 600)
        }
      })
    },

    async submitCommodity2() {
      const videoElement = this.$refs.videoElement;

      // 如果视频已经在播放，截取图片并停止视频流
      if (videoElement.style.display === 'block') {
        this.takePictureAndStopVideo(videoElement);
      } else { // 否则，开始视频流
        try {
          const stream = await navigator.mediaDevices.getUserMedia({ video: true });
          videoElement.style.display = 'block'; // 显示视频元素
          videoElement.srcObject = stream;
        } catch (error) {
          console.error('Error accessing camera:', error);
        }
      }
    },

    takePictureAndStopVideo(videoElement) {
      // 创建canvas来截取当前视频帧
      const canvas = document.createElement('canvas');
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;
      canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);

      // 可以选择转换为Base64或Blob等格式，此处示例为Base64
      const imageDataUrl = canvas.toDataURL('image/png');
      const formattedImageData = encodeURIComponent(imageDataUrl);
      console.log(formattedImageData)
      const payload = 'image='+formattedImageData;
      const url = "https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=24.a4c7b53e1c575e5d4b081c6c151a83c1.2592000.1718031569.282335-58890557";
      const headers = {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      };

      axios.post(url,  payload, { headers: headers })
          .then(response => {
            console.log(response.data);
            this.commodity.name=response.data['result'][0]['keyword']
            this.commodity.description=response.data['result'][0]['root']
          })
          .catch(error => {
            console.error(error);
          });
      // 停止视频流
      const stream = videoElement.srcObject;
      const tracks = stream.getTracks();
      tracks.forEach(track => track.stop());
      videoElement.style.display = 'none';

    },



    handleDelete(r, index) {
      DeleteCommodityById(r.id).then((res) => {
        if (res.status) this.$message.success('商品信息删除成功');
        this.loadTableData()
      })
      console.log(index)
    },

    handleUpdate(r) {
      this.commodity = r
      this.commodityVisible = true
    },

  }}
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 15px;
}
</style>
